<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/indexstyle.css">
    <script src="/common/commonJS.js"></script>
    <style>
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="header-box" style="position: relative; left: 12vw; top: 0; width:76vw;">
       <ul class="layui-nav layui-bg-blue">
           <li class="layui-nav-item" >
               <a href="/" style="text-decoration: none">首页</a>
           </li>
           <li class="layui-nav-item">
               <a href="" style="text-decoration: none" >讨论</a>
           </li>
           <li class="layui-nav-item" style="position: absolute; right: 4vw;" lay-unselect="">
               <a href="javascript:;" id="ustatus" style="text-decoration: none; display: none;"><img src="//t.cn/RCzsdCq" class="layui-nav-img"></a>
               <a href="/login" id="ulogin" style="text-decoration: none; display: block;">登陆</a>
               <dl class="layui-nav-child" id="userselector">

               </dl>
           </li>
       </ul>
    </div>

       <div class="qabox" style="margin-top: 1vh;width: 57vw; height: 100vh; position: absolute; left: 12vw; background: white;">

           <div class="layui-tab" style="margin-top: 2vh;">
                <ul class="layui-tab-title">
                    <li class="layui-this">讨论</li>
                    <li>精华</li>
                    <li>等待回答</li>
                </ul>
               <div class="layui-tab-content">
                   <div id="tab1" class="layui-tab-item layui-show">

                   </div>
                   <div id="tab2" class="layui-tab-item">内容2</div>
                   <div id="tab3" class="layui-tab-item">内容3</div>
               </div>
            </div>
       </div>
       <script src="/js/jquery.min.js"></script>
        <script src="/layui/layui.js" charset="utf-8"></script>
       <script>
           var loginList = "<dd><a href=\"/message\" style=\"text-decoration: none\" >消息<span class=\"layui-badge-dot\"></span></a></dd><dd><a  style=\"text-decoration: none\" href='/public/userInfo'>个人中心</a></dd><dd><a href='/logout' style=\"text-decoration: none\">登出</a></dd>";
           var unloginList = "<a href=\"/login\" style=\"text-decoration: none\">登陆</a>";

           layui.use('element', function(){
               var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
               element.init();
               //监听导航点击
               element.on('nav(demo)', function(elem){
                   layer.msg(elem.text());
               });
           });
           function init() {
               layui.use("element", function () {
                   var element = layui.element;
                   element.init();
                   element.render();
               });
           }
           function loginfo (token) {
               $.ajax({
                   type:"get",
                   url:"/bussiness/userInfo",
                   data: token,
                   success: function (data) {
                       if (data.success) {
                           $("#ustatus").css({"display": "block"});
                           console.log(data.data);
                           $("#userselector").empty();
                           $("#userselector").append("<dd><a  href=\"\" style=\"text-decoration: none\">"+ data.data.userName + "</a></dd><hr/>");
                           $("#userselector").append(loginList);
                       }
                   },
                   error()  {
                       $("#ustatus").css({"display":"none"});
                       $("#ulogin").css({"display": "block"});
                   }
               });
           }
           $(function () {
                loadMajors();
               loadQuestions();
                window.addEventListener('scroll', function(){
                   let t = $('body, html').scrollTop();   // 目前监听的是整个body的滚动条距离
                   if(t>0){
                       $('.hear-box').addClass('box-active')
                   }else{
                       $('.header-box').removeClass('box-active')
                   }
                });
                if (getCookie("tokenUUID") !== null) {
                    var token = {};
                    token["token"] = getCookie("tokenUUID");
                    if (token["token"] !== null) {
                        $("#ulogin").css({"display": "none"});
                        $("#ustatus").css({"display": "block"});
                        loginfo(token);
                    }


                }
                else {
                    $("#ustatus").css({"display":"none"});
                    //$("#userselector").append(unloginList);

                }
           });
           function getInfo() {
               layui.use("layer", function () {
                   var active = {
                       confirmTrans: function () {
                           layer.open({
                               type: 1
                               ,title: false //不显示标题栏
                               ,closeBtn: false
                               ,area: ['800px','1000px']
                               ,shade: 0.1
                               ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                               ,btn: ['火速围观', '残忍拒绝']
                               ,btnAlign: 'c'
                               ,moveType: 1 //拖拽模式，0或者1
                               ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
                               ,success: function(layero){
                                   var btn = layero.find('.layui-layer-btn');
                                   btn.find('.layui-layer-btn0').attr({
                                       href: 'http://www.layui.com/'
                                       ,target: '_blank'
                                   });
                               }
                           })
                       }
                   };
                   active.confirmTrans();
               })
           }
           function loadMajors () {
               $.ajax({
                   type: 'get',
                   url: '/public/getMajorsList',
                   success: function(res) {
                       if (res.success) {
                           var dom = "<button type=\"button\" class=\"layui-btn layui-btn-sm layui-btn-normal\" style='margin-right: 1.5vw;'>专题></button>";
                           dom += "<span class=\"layui-breadcrumb\" lay-separator=\"|\">";
                            for (var i = 0; i < res.data.length; ++i) {
                                console.log(res.data[i].majorName);
                                dom += "<a href=\"\">" + res.data[i].majorName + "</a>";
                                //$("#major-breadcrumb").append("<a alt='" + res.data[i].majorId + "'>" + res.data[i].majorName+ "</a>");
                            }
                            dom += "</span>";
                            $(".layui-tab").before(dom);
                       }
                       init();
                   }
               })
           }
           function loadQuestions() {
                $.ajax({
                    type: 'get',
                    url: '/public/questions',
                    success: function (data) {
                        if (data.success) {
                            var dom = "";
                            for (var i = 0; i < data.data.length; ++i) {
                                dom += "<div class=\"question-box\">";
                                dom += "<h1>" + data.data[i].questionTitle + "</h1>";
                                dom += "<div class=\"question-content\">" + data.data[i].detail + "</div>";
                                dom += "<i class='layui-icon-username'></i>"
                                dom += "</div>";
                            }
                            $("#tab1").append(dom);
                        }
                    }
                })
           }
       </script>


</body>

</html>